<script setup lang="ts">
const {
  positive,
  prompt_id,
  images,
  images2,
  httpUrl,
  wsUrl,
  clienId,
  socketUrl,
  socketId,

  sendPrompt,
  getResult,
  callWorkflow,
  callDalle
} = useComfyUI()

import useComfyUI from "~/composables/comfyui";
import io, {Socket} from 'socket.io-client'


const progress = ref(0)   //进度

onMounted(() => {

  // 连接原生ComfyUI的websocket
  const ws = new WebSocket(`${wsUrl}?clientId=${clienId}`) //与发送提示词的ID保持一致

  ws.onopen = (event) => {
    console.log('event', event)
  }
  ws.onmessage = (msg) => {
    console.log('websocket massage',msg)
    const {type, data} = JSON.parse(msg.data)

    if (type === 'executing' && !data['node']) {
      //获取prompt_id
      const promptId = data['prompt_id']
      if (promptId) {
        console.log('promptId', promptId)
        prompt_id.value = promptId
        getResult()
      }
    }
  }
  // 连接封装的socket

  const socket: Socket = io(socketUrl)
  socket.on('connect', () => {
    socketId.value = socket.id || ''
    console.log('socket connect')
  })
  socket.on('message', (msg) => {
    const {queue_status} = JSON.parse(msg)
    if (queue_status) {
      progress.value = queue_status.progress
    }
    console.log('socket message', msg)
  })
})


</script>

<template>
  <VContainer>
    <h1 class="text-3xl text-center font-weight-bold text-primary my-4">ComfyUI原生API调用演示 Vs. API封装调用演示</h1>
    <v-row>
      <v-col cols="6">
        <VChip
            variant="flat"
            color="grey">ComfyUI-API-Demo原生API
        </VChip>
        <p class="text-body-2">提示词</p>
        <VTextarea
            density="compact"
            class="my-2"
            v-model="positive" variant="outlined" placeholder="正向提示词"/>
        <p class="text-body-2 my-2">1、前置准备：将工作流保存为API格式，并引入项目中</p>
        <p class="text-body-2 my-2">2、设置参数绑定：将界面的参数，赋值给工作流的对应节点</p>
        <p class="text-body-2">3、提交绘图任务(将赋值后的API JSON文件作为参数）</p>
        <VBtn
            rounded="xl"
            class="my-2" @click="sendPrompt">提交绘图任务</VBtn>
        <p class="text-body-2">任务id:{{ prompt_id }}</p>
        <VSpacer/>
        <p class="text-body-2">4、建立websocket长连接，监听任务完成</p>
        <p class="text-body-2">5、处理完成的节点，等待任务完成，根据prompt_id从服务器端取回结果</p>
        <VBtn
            rounded="xl"
            class="my-2" @click="getResult">取回绘图结果</VBtn>
        <p class="text-body-2">6、展示结果</p>
        <p class="text-body-2">7、问题：进度应该如何实现？</p>
        <NuxtLink
            class="text-primary my-2 text-body-2 cursor-pointer"
            to="https://apifox.com/apidoc/shared-3c858595-4cba-47b3-b359-96509a049c68">点击查看全部API文档</NuxtLink>

        <v-row>
          <v-col cols="6" v-for="url in images">
            <VImg class="my-2" :src="url" :key="url"/>
          </v-col>
        </v-row>
      </v-col>
      <v-col cols="6">
        <VChip
            variant="flat"
            color="green">封装之后的API：一个接口实现工作流调用
        </VChip>
        <p class="text-body-2 my-2">
          <VChip
              density="compact"
              color="green">方式一
          </VChip>
          自定义工作流的方式调用
        </p>
        <VBtn
            rounded="xl"
            class="my-2" @click="callWorkflow">调用自定义工作流</VBtn>
        <p class="text-body-2 my-2">进度{{ progress }}%</p>
        <VProgressLinear class="ma-2" v-model="progress"></VProgressLinear>
        <p class="text-body-2 mt-4">
          <VChip
              density="compact"
              color="green">方式二
          </VChip>

          兼容OpenAI Dalle的API接口调用
        </p>
        <VBtn
            rounded="xl"
            class="my-2" @click="callDalle">Dalle接口形式调用</VBtn>
        <p class="text-body-2 my-2">展示结果</p>
        <v-row>
          <v-col cols="6" v-for="url in images2">
            <VImg class="my-2" :src="url" :key="url"/>
          </v-col>
        </v-row>
      </v-col>
    </v-row>

  </VContainer>


</template>

<style scoped>

</style>